import React from "react";
import { LeftOutline } from "antd-mobile-icons";
import "./Orders.css";
import { useNavigate } from "react-router-dom";
import { Footer } from "antd-mobile";

export default function Orders() {
  const navigate = useNavigate();
  return (
    <div>
      <header>
        <LeftOutline
          style={{ color: "white", fontSize: "30px" }}
          onClick={() => {
            navigate("/index/home");
          }}
        />
        <div
          className="header_ipt"
          onClick={() => {
            navigate("/search");
          }}
        >
          <span
            style={{ color: "white", fontSize: "20px", marginLeft: "120px" }}
          >
            支付成功
          </span>
        </div>
      </header>
      <div
        style={{
          width: "100%",
          height: "100vh",
          backgroundColor: "rgb(244,248,255)",
        }}
      >
        <div className="orders-one">
          <p>
            <img
              src="./public/对勾小.png"
              alt=""
              style={{ width: "50px", height: "50px" }}
            />
          </p>
          <p style={{ fontSize: "18px" }}>支付成功！</p>
          <div className="orders-btn">
            <button
              onClick={() => {
                navigate("/index/home");
              }}
            >
              返回首页
            </button>
            <button style={{ background: "rgb(153,204,51)", color: "white" }}>
              查看订单
            </button>
          </div>
        </div>
        <Footer
          style={{
            width: "100%",
            height: "1.875rem",
            background: "rgb(241,248,255)",
            marginTop: "3.125rem",
          }}
          label={
            <div
              style={{
                display: "flex",
                height: "3.125rem",
                lineHeight: "3.125rem",
                color: "black",
              }}
            >
              <span>
                <img
                  src="./public/推荐.png"
                  alt=""
                  style={{ width: "3.125rem", height: "3.125rem" }}
                />
              </span>
              <span style={{ fontSize: "0.9375rem", marginLeft: "0.625rem" }}>
                更多推荐
              </span>
            </div>
          }
        ></Footer>
        <div style={{ padding: "1.25rem" }}>
          <div className="search-bottom">
            <p>
              <img
                src="./public/芒果.png"
                alt=""
              />
            </p>
            <div style={{ lineHeight: "1.875rem", marginTop: "0.9375rem" }}>
              <p style={{ fontSize: "18px" }}>纯天然水果（500g）</p>
              <p style={{ fontSize: "15px", color: "gray" }}>
                纯天然种植 | 自然生长 | 绿色食品
              </p>
              <p style={{ color: "red" }}>
                <span>￥</span>
                <span style={{ fontSize: "1.1875rem" }}>60.00</span>
              </p>
            </div>
          </div>
          <div className="search-bottom">
            <p>
              <img
                src="./public/晴王.png"
                alt=""
              />
            </p>
            <div style={{ lineHeight: "1.875rem", marginTop: "0.9375rem" }}>
              <p style={{ fontSize: "1.125rem" }}>纯天然水果（500g）</p>
              <p style={{ fontSize: "0.9375rem", color: "gray" }}>
                纯天然种植 | 自然生长 | 绿色食品
              </p>
              <p style={{ color: "red" }}>
                <span>￥</span>
                <span style={{ fontSize: "1.1875rem" }}>80.00</span>
              </p>
            </div>
          </div>
          <div className="search-bottom">
            <p>
              <img
                src="./public/榴莲.png"
                alt=""
              />
            </p>
            <div style={{ lineHeight: "1.875rem", marginTop: "0.9375rem" }}>
              <p style={{ fontSize: "1.125rem" }}>纯天然水果（500g）</p>
              <p style={{ fontSize: "0.9375rem", color: "gray" }}>
                纯天然种植 | 自然生长 | 绿色食品
              </p>
              <p style={{ color: "red" }}>
                <span>￥</span>
                <span style={{ fontSize: "1.1875rem" }}>10.00</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
